{% from 'icons.html' import send_icon, clear_icon, copy_icon, thinking_icon, result_icon, chevron_down_icon, warning_icon %}
{% extends "layout.html" %}

{% block title %}DiDo智能专家推荐助手{% endblock %}

{% block styles %}
<!-- 代码高亮 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-json.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-bash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-sql.min.js"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<style>
    /* SVG图标样式 */
    svg {
        display: inline-block;
        vertical-align: middle;
        transition: all 0.2s ease;
    }

    button svg {
        pointer-events: none;
    }

    .copy-message:hover svg,
    .input-action:hover svg,
    #send-button:hover svg {
        transform: scale(1.1);
    }

    .thinking-toggle svg {
        transition: transform 0.3s ease;
    }

    .thinking-toggle.collapsed svg {
        transform: rotate(-90deg);
    }

    /* 打字光标样式 */
    .typing-cursor {
        display: inline-block;
        margin-left: 2px;
        animation: blink 1s infinite;
        color: var(--text-color);
        font-weight: bold;
    }

    @keyframes blink {
        0%, 100% { opacity: 1; }
        50% { opacity: 0; }
    }

    /* 消息动画效果 */
    .message.ai {
        opacity: 0;
        transform: translateY(10px);
        animation: fadeInUp 0.3s ease-out forwards;
    }

    @keyframes fadeInUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="chat-container">
    <!-- 消息显示区域 -->
    <div id="chat-messages" class="chat-messages">
        <!-- 欢迎消息 -->
        <div class="message welcome animate-in">
            <div class="message-content">
                <h2 class="welcome-title">我是缔铎科技智能专家推荐助手DiDo，很高兴见到您！</h2>
            </div>
        </div>
    </div>
    <!-- 输入区域（固定底部） -->
    <div class="input-container input-container-bottom">
        <!-- 机器人按钮（固定在输入框右上角） -->
        <div class="expert-robot-toggle" id="expert-robot" title="需要我来推荐专家嘛">
            <div class="robot-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <!-- 身体（共用，始终显示） -->
                    <g class="robot-body">
                        <rect x="7" y="16" width="10" height="6" rx="2" fill="currentColor"/>
                        <line x1="10" y1="17.5" x2="14" y2="17.5" stroke="white" stroke-width="0.8" opacity="0.8"/>
                        <line x1="10" y1="19.5" x2="14" y2="19.5" stroke="white" stroke-width="0.8" opacity="0.8"/>
                        <circle cx="7.5" cy="18.5" r="0.5" fill="white" opacity="0.6"/>
                        <circle cx="16.5" cy="18.5" r="0.5" fill="white" opacity="0.6"/>
                    </g>
                    <!-- 正常状态的表情 -->
                    <g class="robot-normal">
                        <circle cx="12" cy="10" r="7" fill="currentColor"/>
                        <circle cx="12" cy="3" r="1.5" fill="currentColor"/>
                        <path d="M12 3 L12 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                        <circle cx="9" cy="9" r="2" fill="white"/>
                        <circle cx="15" cy="9" r="2" fill="white"/>
                        <circle cx="9.5" cy="8.5" r="0.8" fill="#667eea"/>
                        <circle cx="15.5" cy="8.5" r="0.8" fill="#667eea"/>
                        <path d="M9 12 Q12 14 15 12" stroke="white" stroke-width="1.5" stroke-linecap="round" fill="none"/>
                    </g>
                    <!-- 娇羞状态的表情（拖拽时显示） -->
                    <g class="robot-shy">
                        <circle cx="12" cy="10" r="7" fill="currentColor"/>
                        <circle cx="12" cy="3" r="1.5" fill="currentColor"/>
                        <path d="M12 3 L12 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                        <!-- 脸颊红晕 -->
                        <ellipse cx="8" cy="10.5" rx="1.8" ry="1.5" fill="#ff9eb5" opacity="0.7"/>
                        <ellipse cx="16" cy="10.5" rx="1.8" ry="1.5" fill="#ff9eb5" opacity="0.7"/>
                        <!-- 害羞的眼睛（向下看） -->
                        <path d="M9 9.5 Q9 8.3 10.2 8.3" stroke="white" stroke-width="1.8" stroke-linecap="round" fill="none"/>
                        <path d="M15 9.5 Q15 8.3 13.8 8.3" stroke="white" stroke-width="1.8" stroke-linecap="round" fill="none"/>
                        <!-- 高光点（变小，向下） -->
                        <circle cx="9.3" cy="9.2" r="0.5" fill="#667eea" opacity="0.8"/>
                        <circle cx="15.7" cy="9.2" r="0.5" fill="#667eea" opacity="0.8"/>
                        <!-- 撅嘴（倒U型，显得害羞） -->
                        <path d="M10 12.5 Q12 11 14 12.5" stroke="white" stroke-width="1.5" stroke-linecap="round" fill="none"/>
                    </g>
                </svg>
            </div>
            <div class="robot-tooltip robot-tooltip-initial">我可以为您推荐专家，请告诉我您的需求。</div>
            <div class="robot-tooltip robot-tooltip-hover">需要我来推荐专家嘛？</div>
        </div>
        
        <!-- 专家推荐区域（从机器人位置展开，默认隐藏） -->
        <div id="recommended-questions" class="recommended-questions-container" style="display: none;">
            <div class="recommended-questions-header">
                <div class="recommended-questions-title-wrapper">
                    <span class="recommended-questions-prompt">点击问题卡片，快速获取相关领域专家推荐</span>
                </div>
                <div class="recommended-questions-controls">
                    <button id="toggle-questions" class="toggle-btn" title="收起推荐问题">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="18 15 12 9 6 15"></polyline></svg>
                    </button>
                    <button id="refresh-questions" class="refresh-btn" title="换一批">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"></path></svg>
                    </button>
                </div>
            </div>
            <div class="recommended-questions-list">
                <!-- 推荐问题通过JS动态加载 -->
            </div>
        </div>
        
        <form id="chat-form">
            <div class="input-wrapper">
                <textarea id="user-input" placeholder="请输入您的问题..." rows="1" autofocus></textarea>
                <div class="input-actions">
                    <button type="button" id="clear-input" class="input-action" title="清空输入">
                        {{ clear_icon() }}
                    </button>
                    <button id="send-button" type="submit" disabled>
                        {{ send_icon() }}
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- JavaScript模板 - AI思考推理和回答消息 -->
<template id="ai-message-template">
    <div class="message-group animate-in">
        <!-- 思考推理过程 -->
        <div class="message thinking-process">
            <div class="thinking-header">
                <span>
                    {{ thinking_icon() }}
                    思考推理过程
                </span>
                <div class="thinking-toggle">
                    <span class="toggle-text">收起</span>
                    {{ chevron_down_icon() }}
                </div>
            </div>
            <div class="thinking-content"></div>
        </div>

        <!-- 连接器 -->
<!--        <div class="thinking-result-connector">-->
<!--            <div class="connector-line"></div>-->
<!--            <div class="connector-arrow"></div>-->
<!--        </div>-->

        <!-- 结果消息 -->
        <div class="message result-message">
            <div class="result-header">
                <span>
                    {{ result_icon() }}
                    回答结果
                </span>
                <div class="message-actions">
                    <button class="copy-message" title="复制回答">
                        {{ copy_icon() }}
                    </button>
                </div>
            </div>
            <div class="message-content"></div>
<!--            <div class="sources-container">-->
<!--                <div class="sources-toggle">-->
<!--                    <i class="fas fa-book"></i> <span>查看来源</span>-->
<!--                </div>-->
<!--                <div class="sources-content collapsed"></div>-->
<!--            </div>-->
        </div>

        <!-- 推理统计数据 -->
<!--        <div class="inference-stats">-->
<!--            <div class="stats-toggle">-->
<!--                <i class="fas fa-chart-line"></i> <span>性能数据</span>-->
<!--            </div>-->
<!--            <div class="stats-content collapsed"></div>-->
<!--        </div>-->
    </div>
</template>

<!-- 用户消息模板 -->
<template id="user-message-template">
    <div class="message user animate-in">
        <div class="message-content"></div>
        <div class="message-actions">
            <button class="copy-message" title="复制消息">
                {{ copy_icon() }}
            </button>
        </div>
    </div>
</template>

<!-- 加载状态模板 -->
<template id="loading-template">
    <div class="message loading animate-in">
        <div class="loading-indicator">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="loading-text">思考中...</div>
    </div>
</template>

<!-- 错误信息模板 -->
<template id="error-template">
    <div class="message error animate-in">
        <div class="error-icon">
            {{ warning_icon() }}
        </div>
        <div class="message-content"></div>
    </div>
</template>

{% endblock %}

{% block extra_scripts %}
<script>
    // 注入初始配置
    window.modelConfig = {{ model_config|tojson }}
    window.mockMode = {{ mock_mode|default(false)|tojson }}

    document.addEventListener('DOMContentLoaded', function() {
        var userInput = document.getElementById('user-input');
        if (userInput) {
            userInput.addEventListener('keydown', function(e) {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    document.getElementById('send-button').click();
                }
                // 否则允许换行
            });
        }
    });
</script>
{% endblock %}